<template>
	<div>
		<input type="file" id='btnFile'>
		<input type="button" value="开始上传" @click="upload(0)"><br />
		<a-progress :percent="numComputed" />
		已上传：{{okSize}}<br />
		总大小：{{totalSize}}
		<a-progress :percent="100" size="small" />
		<div class="flex_two">
			<div>
				源文件播放
				<video v-if="fileUrl" id="my_video_1" class="video-js vjs-default-skin" width="1200" controls preload="auto"
					data-setup='{}'>
					<source :src="fileUrl">
				</video>
			</div>
			<div>
				m3u8播放
				<video id="video-two" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'>
					<!-- <source :src="fileUrl" type="application/x-mpegURL"> -->
				</video>
			</div>
		</div>
	</div>
</template>

<script>
	import 'ant-design-vue/lib/progress/style/index.css';
	import { Progress } from 'ant-design-vue'
	// import videojs from 'video.js'
	// import 'videojs-contrib-hls'
	// import 'video.js/dist/video-js.css'
	import axios from "axios"
	export default {
		data() {
			return {
				fileUrl: '',
				totalSize: 0, //总大小
				okSize: 0, //已上传大小
				setting2: {
					playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
					autoplay: true, //如果true,则自动播放
					controls : true, //是否拥有控制条
					loop : true, //视频播放结束后，是否循环播放
					// muted : true/false 是否静音
					"metadata":true, //元数据信息 ，比如视频长度，尺寸等
					// ‘none‘ 不预加载任何数据，直到用户开始播放才开始下载
					// children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件，数组中的顺序将影响组件的创建顺序哦。
					muted: false, // 默认情况下将会消除任何音频。
					loop: true, // 循环播放
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{ // 播放资源和资源格式
						type: "application/x-mpegURL",
						src: 'http://39.103.131.74:2000/bigFile/xushan/index.m3u8' //你的视频地址（先为空，之后动态赋值）
					}],
					hls: {
						withCredentials: true
					},
					poster: require("../../assets/img/logo_1.png"), //视频封面图
					width: document.documentElement.clientWidth / 2, // 默认视频全屏时的最大宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。

				}
			}
		},
		mounted() {
			this.$nextTick(() => {
						this.playerTwo = videojs(document.getElementById('video-two'), this.setting2,
							function onPlayerReady() {
								videojs.log("播放器已经准备好了!");
								this.play();
								// How about an event listener?<br>  // 如何使用事件监听？
								this.on("ended", function() {
									videojs.log("播放结束了!");
								});
							})
						})
				},
				components: {
					aProgress: Progress
				},
				computed: {
					numComputed() {
						if ((this.okSize / this.totalSize).toFixed(2) * 100 >= 99 && this.totalSize > 0) {
							return 100
						} else {
							return (this.okSize / this.totalSize).toFixed(3) * 100
						}
					}
				},
				methods: {
					//index表示第几个区块
					upload(index) {
						var btnFile = document.querySelector('#btnFile');
						var chunkSize = 1024 * 1024;
						let file = btnFile.files[0];

						let [fname, fext] = file.name.split('.');

						let start = index * chunkSize;
						if (start > file.size) {
							this.merge(file.name);
							return;
						}
						// 
						this.totalSize = file.size
						this.okSize = start
						console.log(start, file.size);
						//获取区块的内容
						let blob = file.slice(start, start + chunkSize);
						//区块名
						let blobName = `${fname}.${index}.${fext}`;
						//把区块转成file文件
						let blobFile = new File([blob], blobName);
						let formData = new FormData();

						formData.append('file', blobFile);
						axios.post('http://39.103.131.74:2000/api/bigfileQuick', formData).then(res => {
							this.upload(++index);
						})
					},
					merge(name) {
						axios.post('http://39.103.131.74:2000/api/bigfileMerge', {
							name: name
						}).then(res => {
							// 普通地址赋值
							this.fileUrl = null
							setTimeout(() => {
								this.fileUrl = res.data.url
							}, 300)
							// m3u8地址赋值
							this.playerTwo.src({
								src: encodeURI(res.data.m3u8),
								type: "application/x-mpegURL",
							})
						})
					}
				},
				destroyed(){
					this.playerTwo.dispose();
				}
		}
</script>
<style scoped lang="less">
	.flex_two {
		display: flex;
		justify-content: space-around;

		div {
			width: 100%;
			padding: 5px;
			height: 500px;
		}
	}
	.video-js{
		width: 100%;
		height: 100%;
	}
</style>
